<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="JS\vue.min.js"></script>
    <script src="JS\axios.min.js"></script>
    <title>冒泡反应修饰符功能</title>
    <style type="text/css">
      * {
        margin: 0 auto;
        text-align: center;
        line-height: 40px;
      }

      div {
        width: 300px;
        cursor: pointer;
      }

      #grandFather {
        background: orangered;
      }

      #father {
        background: yellowgreen;
      }

      #me {
        background: blueviolet;
      }

      #son {
        background: skyblue;
      }
    </style>
  </head>

  <body>
    <div id="div1">{{VueTest}}</div>
    <div id="content">
      <div id="grandFather" v-on:click="doc">
        grandFather
        <div id="father" v-on:click.once="doc">
          father
          <div id="me" v-on:click="doc">
            me
            <div id="son" v-on:click="doc">son</div>
          </div>
        </div>
      </div>
      <p>从前到后依次为响应顺序：<br />{{NextInfo}}</p>
    </div>
    <br />
    <br />
    <br />
    <div id="prevent">
      <a href="www.baidu.com" @click="locationFunc">一般的链接www.baidu.com</a>

      <br />

      <a href="www.baidu.com" @click.prevent="locationFunc"
        >prevent之后的链接 www.baidu.com</a
      >

      <br />

      <a href="www.baidu.com" @click.prevent
        >纯prevent之后的链接 www.baidu.com</a
      >
    </div>
  </body>
  <script>
    new Vue({
      el: "#div1",
      data: {
        VueTest: "Hello World!",
      },
      methods: {},
    });
    var content = new Vue({
      el: "#content",
      data: {
        id: "",
        NextInfo: "",
      },
      methods: {
        doc: function () {
          this.id = event.currentTarget.id;
          this.NextInfo += this.id + "  ";
        },
      },
    });

    new Vue({
      el: "#prevent",
      data: {},
      methods: {
        locationFunc: function () {
          alert("成功跳转");
        },
      },
    });
  </script>
</html>
